<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .nav_top {
            background-color: #f5f5f5;
        }

        .heading {
            border-bottom: 1px solid #ddd;
            margin-bottom: 30px;
        }

        h6 {
            font-size: 20px;
        }

        .header {
            margin-top: 30px;
        }

        .breadcrumb {
            margin-bottom: 40px;
            border: 1px solid #ddd;
        }

        .breadcrumb i {
            font-size: 15px;
        }

        .breadcrumb > li {
            text-shadow: 0 1px 0 #FFF;
            padding: 0 20px;
            position: relative;
            white-space: nowrap;
        }

        .breadcrumb > li + li:before {
            content: '';
            padding: 0;
        }

        .breadcrumb > li:after {
            content: '';
            display: block;
            position: absolute;
            top: -3px;
            right: -5px;
            width: 31px;
            height: 31px;
            border-right: 1px solid #DDD;
            border-bottom: 1px solid #DDD;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .product {
            margin-bottom: 50px;
        }

        .product .image {
            width: 350px;
            height: 350px;
        }

        .product .name {
            border-bottom: 1px solid #eee;
        }

        .product .name h3 {
            font-weight: 500;
            font-size: 20px;
            color: #666;
            margin-top: 10px;
        }

        .product .price {
            font-size: 22px;
            margin: 10px 0;
        }

        .product .price span {
            color: #aaa;
            margin-left: 10px;
            text-decoration: line-through;
        }

        .box-btns {
            margin-top: 0;
            padding: 24px 10px 0;
        }

        .box-btns .box-btns-one {
            height: 44px;
            overflow: hidden;
            border: 1px solid #ccc;
            position: relative;
            margin-right: 10px;
            float: left;
        }

        .box-btns .box-btns-one input {
            width: 43px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            float: left;
        }

        .box-btns .box-btns-one .box-btns-one1 {
            float: left;
        }

        .box-btns .box-btns-one .box-btns-one1 button {
            cursor: pointer;
            width: 17px;
            height: 23px;
            outline: none;
            margin-top: -1px;
        }
    </style>
</head>
<body>
<div class="container-fluid nav_top">
    <div class="navbar-header">
        <a class="navbar-brand" th:href="@{/}">淘淘商城</a>
    </div>
    <div>
        <ul class="nav navbar-nav navbar-right">
            <li class="active" th:if="${session.user}==null"><a th:href="@{/login}">亲，请登录</a></li>
            <li class="dropdown" th:unless="${session.user}==null">
                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                   aria-expanded="false" href="#">
                    <span th:text="'欢迎您:' + ${session.user.username} + '!'"></span><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a th:href="@{/user/logout}">退出</a></li>
                </ul>
            </li>
            <li>
                <a th:href="@{/user/cartList}">购物车</a>
            </li>
            <li>
                <a th:href="@{/user/order}">我的订单</a>
            </li>
        </ul>
    </div>
</div>

<div id="page-content" class="single-page">
    <div class="container">
        <!--模拟导航-->
        <div class="row header">
            <div class="col-lg-12">
                <ul class="breadcrumb">
                    <li>
                        <a th:href="@{/}">首页</a>
                    </li>
                    <li>
                        <a th:href="@{/type/{id}(id=${product.typeId})}" th:text="${type.typeName}">手机</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="row product">
            <div class="col-md-12">
                <!--商品图片-->
                <div class="col-md-5">
                    <div class="image">
                        <img th:src="@{${product.imageUrl}}" style="height: 350px; width: 350px;"/>
                    </div>
                </div>
                <!--商品介绍-->
                <div class="col-md-7">
                    <div class="caption">
                        <div class="name">
                            <h3 style="color: black;"><span th:text="${product.name}">商品名称</span></h3>
                            <input type="hidden" id="product_id" th:value="${product.id}">
                        </div>

                        <div class="price"
                             style="font-size:16px;background-color:#F5F5F5;padding-left: 16px;padding-top: 10px;">

                            <p>价 格：
                                <font style="color: red;font-size: 25px;">￥<font
                                        th:text="${product.nowPrice}">2099.00</font></font><span>￥<span
                                        th:text="${product.price}">2699.00 </span></span></p>
                            <p>优 惠 券:&nbsp;&nbsp;&nbsp;
                                <font style="color: red;">满100减10&nbsp;&nbsp; 立即领取></font>
                            </p>
                            <p>促 销:
                                <font style="color: red;padding-left: 40px;">购买即赠商城积分，积分可抵现~</font>
                            </p>
                            <p>库存：
                                <font style="color: black; padding-left:40px" th:text="${product.num}">100</font>
                                <input type="hidden" th:value="${product.num}" id="num">
                            </p>

                        </div>

                        <hr/>

                        <!--购物按钮-->
                        <div class="col-xs-12">
                            <div class="box-btns clear">
                                <div class="box-btns-one">
                                    <input type="text" name="num" id="buy_num" value="1"/>
                                    <div class="box-btns-one1">
                                        <div>
                                            <button type="button" id="jia">
                                                +
                                            </button>
                                        </div>
                                        <div>
                                            <button type="button" id="jian">
                                                -
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="float:left; margin-left:10px;">
                                <a href="javascript:void(0);" id="addCart"><img src="../static/image/buy2.gif"
                                                                                th:src="@{/image/buy2.gif}"
                                                                                style="margin-right: 10px;"/></a>
                                <a href="javascript:void(0);" id="buy"><img src="../static/image/order.gif"
                                                                            th:src="@{/image/order.gif}"/></a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="heading">
                <h6>商品详情</h6>
            </div>
            <p th:text="${product.introduce}"></p>
        </div>
    </div>
</div>
</body>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        //加减
        $("#jia").click(function () {
            let n = $(this).parent().parent().prev("input").val();
            let kucun = $("#num").val();
            if (n == kucun) {
                return;
            }
            let num = parseInt(n) + 1;
            if (num == 0) {
                return;
            }
            $(this).parent().parent().prev("input").val(num)
        })

        $("#jian").click(function () {
            let n = $(this).parent().parent().prev("input").val();
            let num = parseInt(n) - 1;
            if (num == 0) {
                return;
            }
            $(this).parent().parent().prev("input").val(num)
        })

        //加入购物车
        $("#addCart").click(function () {
            let buy_now = $("#buy_num").val();
            let product_id = $("#product_id").val();
            let kucun = $("#num").val();
            if (buy_now == "" || parseInt(buy_now) <= 0) {
                alert("购买数量不能为空！");
            }
            if (parseInt(buy_now) > kucun) {
                alert("数量超过了库存！");
                return;
            }
            $.ajax({
                url: 'http://localhost:8081/user/addProduct/toCart',
                method: 'post',
                data: {productId: product_id, num: buy_now},
                success: function (res) {
                    window.location.reload();
                    alert("添加成功！");
                },
                complete: function (xhr, status) {
                    //拦截器拦截没有权限跳转
                    // 通过xhr取得响应头
                    var REDIRECT = xhr.getResponseHeader("REDIRECT");
                    //如果响应头中包含 REDIRECT 则说明是拦截器返回的
                    if (REDIRECT == "REDIRECT") {
                        document.location.href = xhr.getResponseHeader("CONTENTPATH");
                    }
                }
            })

        })

        //购买
        $("#buy").click(function () {
            let buy_now = $("#buy_num").val();
            let product_id = $("#product_id").val();
            let kucun = $("#num").val();
            if (buy_now == "" || parseInt(buy_now) <= 0) {
                alert("购买数量不能为空！");
            }
            if (parseInt(buy_now) > kucun) {
                alert("数量超过了库存！");
                return;
            }
            $.ajax({
                url: 'http://localhost:8081/user/order/buy',
                method: 'post',
                data: {productId: product_id, num: buy_now},
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                        alert("下单成功！请15分钟之内完成支付");
                        window.location.href = "http://localhost:8081/user/order/details/" + res.data;
                    } else {
                        alert("下单失败！")
                        window.location.reload()
                    }
                },
                complete: function (xhr, status) {
                    //拦截器拦截没有权限跳转
                    // 通过xhr取得响应头
                    var REDIRECT = xhr.getResponseHeader("REDIRECT");
                    //如果响应头中包含 REDIRECT 则说明是拦截器返回的
                    if (REDIRECT == "REDIRECT") {
                        document.location.href = xhr.getResponseHeader("CONTENTPATH");
                    }
                }
            })

        })

    })
</script>
</html>